<template>
  <div class="m-row" ref="mRowRef">
    <!-- :style="{
      'margin-left': g,
      'margin-right': g
    }" -->
    <slot />
  </div>
</template>
<script setup>
/**
 * 使用方法：（结合 m-col 组件使用）
 * <m-row :gutter="20" class="first-floor">
    <m-col :span="4">xxxx</m-col>
    </m-row>
 * 
 * props:
 *      gutter    col之间的间隔
 * 
 */
import { ref, computed, onMounted, watch } from 'vue'
const props = defineProps({
  gutter: {
    type: Number,
    default: 20
  }
})
const g = computed(() => {
  return (props.gutter * -1) / 2 + 'px'
})

const mRowRef = ref()
const childs = ref(mRowRef.value?.children)
function setColPadding() {
  const childsEL = mRowRef.value.children
  const p = props.gutter / 2 + 'px'
  for (let i = 0; i < childsEL.length; i++) {
    let el = childsEL[i]
    el.style.paddingLeft = p
    el.style.paddingRight = p
  }
}
watch(
  () => childs,
  () => {}
)
onMounted(() => {
  setColPadding()
})
</script>
<style scoped>
.m-row {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.m-row:after {
  clear: both;
}
.m-row:after,
.m-row:before {
  display: table;
  content: '';
}
</style>
